import React, { useState, useEffect } from'react';
import './Shenchu.less';
import { useNavigate } from'react-router-dom';
import { Modal } from 'antd';

interface ProcessData {
  id: string;
  photos: string[];
  videos: string[];
  processingResult: string;
  completedTime: string;
  recordingPerson: string;
  createdAt: string;
}

const Shenchu: React.FC = () => {
  const navigate = useNavigate();
  const [records, setRecords] = useState<ProcessData[]>([]);
  const [visible, setVisible] = useState(false);
  const [selectedRecord, setSelectedRecord] = useState<ProcessData | null>(null);

  useEffect(() => {
    const storedRecords = JSON.parse(localStorage.getItem('processRecords') || '[]');
    setRecords(storedRecords);
  }, []);

  const handleDelete = (id: string) => {
    const updatedRecords = records.filter(record => record.id!== id);
    setRecords(updatedRecords);
    localStorage.setItem('processRecords', JSON.stringify(updatedRecords));
  };

  const handleView = (record: ProcessData) => {
    setSelectedRecord(record);
    setVisible(true);
  };

  return (
    <div className="shenchu-container">
      <h2>处理记录审核</h2>
      <button onClick={() => navigate('/service/layout/gongdan')} className="back-button">
        返回工单列表
      </button>

      <div className="records-list">
        {records.length === 0? (
          <p>暂无处理记录</p>
        ) : (
          records.map(record => (
            <div key={record.id} className="record-item">
              <div className="record-header">
                <span>记录时间: {new Date(record.createdAt).toLocaleString()}</span>
                <span>处理人员: {record.recordingPerson}</span>
                <button onClick={() => handleView(record)} className="view-button">
                  查看
                </button>
                <button onClick={() => handleDelete(record.id)} className="delete-button">
                  删除
                </button>
              </div>

              <div className="record-content">
                <p><strong>处理结果:</strong> {record.processingResult}</p>
                <p><strong>完成时间:</strong> {record.completedTime}</p>

                <div className="media-container">
                  {record.photos.map((photo, index) => (
                    
                    <img key={`photo-${index}`} src={photo} alt={`处理照片-${index}`} />
                  ))}
                  {record.videos.map((video, index) => (
                    <video key={`video-${index}`} src={video} controls />
                  ))}
                </div>
              </div>
            </div>
          ))
        )}
      </div>

      <Modal
        title="查看处理记录详情"
        open={visible}
        onCancel={() => setVisible(false)}
        footer={null}
      >
        {selectedRecord && (
          <div>
            <div className="record-header">
              <span>记录时间: {new Date(selectedRecord.createdAt).toLocaleString()}</span>
              <span>处理人员: {selectedRecord.recordingPerson}</span>
            </div>
            <div className="record-content">
              <p><strong>处理结果:</strong> {selectedRecord.processingResult}</p>
              <p><strong>完成时间:</strong> {selectedRecord.completedTime}</p>
              <div className="media-container">
                {selectedRecord.photos.map((photo, index) => (
                  <img key={`photo-${index}`} src={photo} alt={`处理照片-${index}`} />
                ))}
                {selectedRecord.videos.map((video, index) => (
                  <video key={`video-${index}`} src={video} controls />
                ))}
              </div>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default Shenchu;